@extends('admin.layout.layout', ['row' => @$page])

@section('contain')

    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions">

                @if(checkMethodsAuthority('dealer_import') && 0)
                    <div class="item">
                        <a href="/{{ request()->path() }}/import" class="btn btn-warning">{{ ts('TONGBU') }}</a>
                    </div>
                @endif

                @if(checkMethodsAuthority('distributor_create'))
                    <div class="item">
                        <a href="/{{ request()->path() }}/create" class="btn btn-primary">{{ ts('addnew') }}</a>
                    </div>
                @endif

                <div class="item">
                    <button class="btn btn-primary" onclick="exportDealer()">{{ ts('EXPORT') }}</button>
                </div>

            </div>
        </div>

        <div class="filter-wrapper">
            <form action="/{{ request()->path() }}/" class="form-inline filter-form">
                <div class=" input-group mb-3 custom-control-inline">
                    <input type="text" class="form-control s-input" name="value" value="{{ request()->input('value') }}" placeholder="{{ ts('dealerSEARCHTEXT') }}">
                </div>
                {{--<div class="input-group mb-3 custom-control-inline">
                    <select name="status" class="form-control">
                        <option value="">{{ ts('select').' '.ts('status') }}</option>
                        <option value="1" {{ request()->input('status') == 1 ? 'selected' : '' }}>{{ ts('active') }}</option>
                        <option value="2" {{ request()->input('status') == 2 ? 'selected' : '' }}>{{ ts('deactive') }}</option>
                    </select>
                </div>--}}
                <div class="input-group mb-3 custom-control-inline">
                    <select name="mdtype" class="form-control">
                        <option value="">{{ ts('select').' '.ts('jxsjb') }}</option>
                        @foreach(range(1,4) as $v)
                            <option value="{{ $v }}" {{ request()->input('mdtype') == $v ? 'selected' : '' }}>{{ ts('mdtype'.$v) }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <button class="btn btn-primary">{{ ts('SEARCH') }}</button>
                    <a href="/{{ request()->path() }}/" class="btn btn-warning">{{ ts('RESET') }}</a>
                    @if(session('admin.user_type')==2)
                        <button type="button" class="btn btn-primary" onclick="tjMD('{{ session('admin.id') }}')">{{ ts('mdtj') }}</button>
                    @endif
                </div>

            </form>
        </div>
        <div>
            <div>
                <table class="table text-nowrap bt-table d-none">
                    <thead>
                    <tr class="order_column text-center">
                        <th class="text-center">{{ ts('SELECT') }}</th>
                        <th data-column="id">{{ ts('sequence') }}</th>
                        {{--<th data-column="unique_id">{{ ts('dealerid') }}</th>--}}
                        <th data-column="abbr">{{ ts('jxsMC') }}</th>
                        <th>{{ ts('JXSJB') }}</th>
                        <th>{{ ts('sdqy') }}</th>
                        {{--<th data-column="unique_id">{{ ts('jxsMC') }}</th>
                        <th data-column="company_name">{{ ts('COMPANYNAME') }}</th>--}}
                        <th data-column="first_name">{{ ts('CONTACTPERSON') }}</th>
                        <th data-column="phone_number">{{ ts('CONTACTINFORMATION') }}</th>
                        <th data-column="status">{{ ts('STATUS') }}</th>
                        <th style="width:270px">{{ ts('OPERATIONS') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($data as $k => $v)
                        @if(session('hightlight') && session('hightlight.type')=='dealer' && session('hightlight.id')==$v->id)
                            <tr class="item-list table-warning">
                        @else
                            <tr class="item-list">
                                @endif
                                <td class="text-center">
                                    <input type="checkbox" class="roll_icheck icheck_input" name="ids[]" value="{{ $v->id }}">
                                </td>
                                <td>{{ @$data->firstItem()+$k }}</td>
                                {{--<td>{{ $v->id }}</td>--}}
                                <td>{{ @$v->abbr }}</td>
                                <th>{{ ts('mdtype'.@$v->mdtype) }}</th>
                                <td>
                                    <a href="/admin/distributor/{{ @$v->sdid }}">{{ @$v->sdqy }}</a>
                                </td>
                                {{--<td>{{ @$v->company_name }}</td>--}}
                                <td>{{ @$v->first_name }}</td>
                                <td>{{ rsPN(@$v->phone_number) }}</td>
                                <td>
                                    {{ $v->status ? ts('ACTIVE') : ts('DEACTIVE') }}
                                </td>
                                <td  class="fixed-td text-center" style="width:270px">
                                    <a class="btn btn-success btn-sm" href='/{{ request()->path() }}/{{ $v->id }}'>{{ ts('VIEW') }}</a>
                                    @if(checkMethodsAuthority('dealer_import'))
                                        <span class="btn btn-danger btn-sm" onclick="editDealerStatus('{{ $v->id }}', '{{ $v->status }}', '{{ $v->abbr }}')">{{ $v->status != 1 ? ts('active') : ts('DEACTIVE') }}</span>
                                    @endif
                                    @empty(getDPN($v->id))
                                        <span class="btn btn-dark btn-sm disabled">{{ ts('performance') }}</span>
                                    @else
                                        <a class="btn btn-primary btn-sm" href='/{{ request()->path() }}/{{ $v->id }}/performance'>{{ ts('performance') }}</a>
                                    @endif
                                    @if(session('admin.user_type') == 1)
                                        {{--<span class="btn btn-danger btn-sm" onclick="handleDelete3('{{ $v->id }}',  '{{ @$v->abbr }}')">{{ ts('delete') }}</span>--}}
                                    @endif
                                    <a class="btn btn-primary btn-sm" href='/{{ request()->path() }}/{{ $v->id }}/performance'>库存</a>
                                </td>
                            </tr>
                            @endforeach
                    </tbody>
                </table>
            </div>
            <div class="row my-3">
                @if(session('admin.user_type') == 1)
                    {{--<div class="col-auto">
                        <label style="cursor: pointer"><input type="checkbox" class="icheck_all" data-ele=".roll_icheck"><span class="ml-2">{{ ts('SELECTALL') }}</span></label>
                        <span class="btn btn-primary ml-3" onclick="deleteAlliCheck('.roll_icheck', '/admin/dealer/deletes')">{{ ts('delete') }}</span>
                    </div>--}}
                @endif
                <div class="col">
                    {{ $data->appends(request()->input())->links() }}
                </div>
            </div>
        </div>


        <div class="modal fade" id="mdModal">
            <div class="modal-dialog" style="width: 720px;max-width: 100%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-green">{{ ts('mdtj') }}</h5>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        {{--<h3 style="font-weight: bold;font-size: 16px;margin: 20px 0;">{{ ts('mdtj') }}</h3>
                        <table class="table d-none" id="mdTable">
                            <thead>
                            <tr class="order_column text-center">
                                <th data-field="city" data-sortable="true">{{ ts('city') }}</th>
                                <th data-field="ava" data-sortable="true">{{ ts('UST1') }}</th>
                                <th data-field="unava" data-sortable="true">{{ ts('ust0') }} / {{ ts('JY') }}</th>
                                <th data-field="total" data-sortable="true">{{ ts('TOTAL') }}</th>
                            </tr>
                            </thead>
                        </table>--}}
                        <h3 style="font-weight: bold;font-size: 16px;margin: 20px 0;">{{ ts('jxsjb') }}（{{ ts('UST1') }}）</h3>
                        <table class="table d-none" id="mdTable2">
                            <thead>
                            <tr class="order_column text-center">
                                <th data-field="city" data-sortable="true">{{ ts('city') }}</th>
                                <th data-field="mdtype1" data-sortable="true">{{ ts('MDTYPE1') }}</th>
                                <th data-field="mdtype2" data-sortable="true">{{ ts('MDTYPE2') }}</th>
                                <th data-field="mdtype3" data-sortable="true">{{ ts('MDTYPE3') }}</th>
                                <th data-field="mdtype4" data-sortable="true">{{ ts('MDTYPE4') }}</th>
                                <th data-field="mdtype0" data-sortable="true">{{ ts('MDTYPE0') }}</th>
                            </tr>
                            </thead>
                        </table>

                        <div class="pt-3 row">
                            <div class="col-6">
                                <div id="chart1"></div>
                            </div>
                            <div class="col-6">
                                <div id="chart2" style="width: 300px;height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


@endsection

@section('script')
    <script>
        $(document).ready(function () {
            $('.table.bt-table').bootstrapTable({
                fixedColumns: true,
                fixedNumber: 1,
                fixedRightNumber: 1,
            }).removeClass('d-none')
        });
        function mdT1(data) {
            var d1 = data['d1'];
            var d2 = data['d2'];
            var d3 = data['d3'];
            var string = '';
            for (var i in d3) {
                string += '<tr>';
                string += '<td>'+i+'</td>';
                string += '<td>'+(d1[i] || 0)+'</td>';
                string += '<td>'+(d2[i] || 0)+'</td>';
                string += '<td>'+(d3[i] || 0)+'</td>';
                string += '</tr>';
            }
            return string;
        }
        function mdD1(data) {
            var res = [];
            var d1 = data['d1'];
            var d2 = data['d2'];
            var d3 = data['d3'];
            for (var o in d3) {
                res.push({
                    city: o,
                    ava: (d1[o] || 0),
                    unava: (d2[o] || 0),
                    total: (d3[o] || 0),
                })
            }
            return res;
        }
        function mdD2(data) {
            var res = [];
            var d1 = data['m1'];
            for (var o in d1) {
                var item = Object.assign({}, d1[o], {
                    city: o
                });
                res.push(item)
            }
            return res;
        }
        function tjMD(id) {
            console.log('as', id)
            request.get('/admin/ajax/tongji?a=md', {
                params: {
                    id: id
                }
            })
                .then(function (d) {
                    $('#mdTable').bootstrapTable({data: mdD1(d.data)}).removeClass('d-none');
                    $('#mdTable2').bootstrapTable({data: mdD2(d.data)}).removeClass('d-none');
                    chart1(d.data);
                    $('#mdModal').modal();

                    console.log('d', d.data);
                })
        }

        function chart1(data) {
            var array1 = [0,0,0,0,0];
            var m1 = data.m1;
            if (m1) {
                for (o in m1) {
                    var d = m1[o];
                    array1[0] = array1[0] + d.mdtype0;
                    array1[1] = array1[1] + d.mdtype1;
                    array1[2] = array1[2] + d.mdtype2;
                    array1[3] = array1[3] + d.mdtype3;
                    array1[4] = array1[4] + d.mdtype4;
                }
                var series1 = [];
                var legend1 = ['其他', '外星人店', '授权店', '直营店', '旗舰店'];
                array1.forEach((d, index) => {
                    series1.push({
                        value: d,
                        name: legend1[index]
                    })
                });
                var total = array1.reduce(function(prev, curr){
                    return prev + curr;
                });
                console.log(total);
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    legend: {
                        orient: 'horizontal',
                        right: 10,
                        top: 20,
                        textStyle: {
                            fontSize: 12,
                        },
                        data: ['其他', '外星人店', '授权店', '直营店', '旗舰店'],
                        formatter: function (name) {
                            console.log('formatter', name);
                            return name
                        }
                    },
                    series: [
                        {
                            label: {
                                normal: {
                                    position: 'inner',
                                    show: false
                                }
                            },
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: series1,
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        var rand = "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);
                                        var colorList = ['#434348','#7cb5ec','#f15c80','#90ed7d','#f7a35c','#8085e9'];
                                        return colorList[params.dataIndex] || rand;
                                    }
                                }
                            }
                        }
                    ]
                };
                drawChart('chart2', option)
            }
            console.log(m1)
        }

        function drawChart(ele, option) {
            var c1 = echarts.init(document.getElementById(ele), 'macarons');
            c1.setOption(option)
        }

        function exportDealer() {
            console.log('export');
            var a = Qs.parse(location.search.replace('?', ''));
            var form = Object.assign({}, a,  {
                m: 1
            });
            var url = '/admin/dealer/export?' + Qs.stringify(form)+location.hash;
            window.open(url)
        }
    </script>
@endsection